<template>
	<!--页中的外层的容器(包裹器)可以使用id选择器,但是组件中的包裹器不要使用id选择器-->
	<view class="categoryContainer">
		<!--头部-->
		<view class="categoryHeader">
			<view class="search" >搜索商品</view>
		</view>
		<!--内容区域-->
		<view class="contentContainer">
			<view class="leftContainer">
				<scroll-view scroll-y="true" class="leftScroll">
					<view 
						class="scrollItem"
						v-for="category in categoryDatas"
						:key='category.id'
						@click="changeCategoryId(category.id)"
						:class="{'active':categoryId === category.id}"
					>
						{{category.name}}
					</view>
				</scroll-view>
			</view>
			<view class="rightContainer">
				<scroll-view scroll-y="true" class="rightScroll">
					<view class="contentList">
						<image class="contentImg" :src="cateObj.imgUrl"></image>
						<view 
							class="contentItem"
							v-for="subCate in cateObj.subCateList"
							:key='subCate.id'
						>
							<image :src="subCate.wapBannerUrl"></image>
							<text>{{subCate.name}}</text>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	// 引入request
	import request from '../../utils/request.js'
	export default {
		name:'categorys',
		data() {
			return {
				categoryDatas: [],
				categoryId: ''
			};
		},
		// 页面加载后的生命周期回调
		mounted() {
			this.getCategoryDatas();
		},
		methods: {
			async getCategoryDatas() {
				const result = await request('/categoryDatas');
				if (result.code === 200) {
					this.categoryDatas = result.categoryDatas;
					this.categoryId = result.categoryDatas[0].id;
				}
			},
			changeCategoryId(categoryId){
				this.categoryId = categoryId;
			}
		},
		computed: {
			cateObj(){
				return this.categoryDatas.find(item => item.id === this.categoryId)
			}
		}
	};
</script>

<style lang="stylus">
	.categoryContainer
		.categoryHeader
			padding 10upx 0
			.search
				width 90%
				height 60upx
				line-height 60upx
				text-align center
				margin 0 auto
				border 1upx solid #ededed
				border-radius 10upx
				background-color #eee
				font-size 26upx
		.contentContainer
			display flex
			border-top 1upx solid #eee
			box-sizing border-box
			.leftContainer
				width 20%
				border-right 1upx solid #eee
				box-sizing border-box
				.leftScroll
					height calc(100vh - 80upx)
					.scrollItem
						font-size 28upx
						height 80upx
						line-height 80upx
						text-align center
						position relative
						&.active:after
							position absolute
							content ''
							height 60upx
							width 2upx
							background-color red
							top 10upx
							left 5upx
			.rightContainer
				width 80%
				.rightScroll
					height calc(100vh - 80upx)
					.contentList
						display flex
						flex-wrap wrap
						.contentImg
							width 520upx
							height 190upx
							margin 20upx auto
						.contentItem
							width 33.33%
							display flex
							flex-direction column
							align-items center
							image
								width 90%
								height 144upx
							text
								font-size 26upx
</style>
